<template>
    <span style="position: relative;">
<input type="text" @click.stop="sadd(true)" :data-sa-pa="dataId"  v-model="dqz" />
     <div style="position: absolute; top:30px; left: 0px; border: 1px solid #ccc; z-index: 999; background: #fff; width: 300px; display: none"  ref="fdgdfg" :data-sa-pa="dataId" class="saddddsa">
         <table  width="100%">
             <tbody>
             <tr>
                 <td><a :data-sa-pa="dataId"  @click="chahuan(0)">上一月</a></td>
                  <td>{{dqmon}}</td>
                  <td><a :data-sa-pa="dataId" @click="chahuan(1)">下一月</a></td>
             </tr>
             </tbody>
         </table>
         <table width="100%">
             <tbody>
             <tr>
                 <td>一</td>
                 <td>二</td>
                 <td>三</td>
                 <td>四</td>
                 <td>五</td>
                 <td>六</td>
                 <td>日</td>

             </tr>
               <tr v-for="item in dateArr" class="dsadasad">
                   <td v-for="item1 in item" @click="gbsj(item1.rssj)"><span :style="{color:item1.classBol?'#000':'#CCC',background:dqz==item1.rssj?'#ccc':'#fff'}">{{item1.shsj}}</span></td>
             </tr>
             </tbody>
         </table>
     </div>
 </span>
</template>

<script>
import moment from 'moment'
export default {
  props:{date:{
      default:'2019-02-22'
      }},
  data () {
    return {
      dataId:Date.now(),
      msg: 'Welcome to Your Vue.js App',
      xs:false,
      arr:[],
      dateArr:[

      ],
        dqz:'',
        dqmon:''
    }
  },
    directives: {

    },
    computed: {
      dqsj(){
          return moment(this.date).format('YYYY-MM')
      }
    },
    mounted(){
      this.dqz = this.date
       this.dqmon = moment(this.date).format('YYYY-MM')
       this.pinjie(this.dqmon)
        document.querySelector('html').onclick= (e)=> {
            if(!e.target.dataset['saPa']){
                document.querySelectorAll('.saddddsa').forEach(item=>{
                    item.style.display = 'none'
                })
            }
        }
    },
    methods:{
        moment,
        sadd(bla){
           this.$refs.fdgdfg.style.display = bla? 'block':'none'
        },
        //生成数组
        pinjie(date){
            this.dateArr = []
            //前
            let diyihang = []
            let qswz =(moment(date+'-01').format('d')-1)<0?1:(moment(date+'-01').format('d')-1)
            for(let i= 0;i<qswz;i++){
                diyihang.push(
                    {
                        classBol:false,
                        rssj:moment(date).subtract(1,'months').format('YYYY-MM')+'-'+ moment(date+'-01').subtract(i+1,'days').format('DD'),
                        shsj:moment(date+'-01').subtract(i+1,'days').format('DD')
                    }
                    )
            }
            diyihang.reverse()
            diyihang.push({
                classBol:true,
                rssj:date+'-'+'01',
                shsj:'01'
            })
            for(let i= 0;i<6-qswz;i++){
                diyihang.push(
                {
                    classBol:true,
                    rssj:date+'-'+('0'+(i+2)),
                    shsj:'0'+(i+2)
                }
                )
            }
            this.dateArr.push(diyihang)

            let dyh = Number(diyihang[6].shsj)

            for(let i= 0;i<4;i++){
                let sss = []
                for(let y= 0;y<7;y++){

                    sss.push(
                        {
                            classBol:true,
                            rssj:date+'-'+(y+dyh+1+(i*7)).toString().padStart(2,'0'),
                            shsj:(y+dyh+1+(i*7)).toString().padStart(2,'0')
                        }
                    )
                }
                this.dateArr.push(sss)
            }

            //后
            let zhyt = Number(moment(date).endOf('month').format("DD"))
            let xxx = 1
            for(let i= 0;i<7;i++){

                if(Number(this.dateArr[4][i].shsj) > zhyt){
                    this.dateArr[4][i] = {
                        classBol:false,
                        rssj:date+'-'+(xxx+1).toString().padStart(2,'0'),
                        shsj:(xxx++).toString().padStart(2,'0')
                    }

                }

            }

        },
        chahuan(bol){
            if(bol){
                this.dqmon = moment(this.dqmon).add(1,'months').format('YYYY-MM')
                this.pinjie(this.dqmon)
            }else {
                this.dqmon = moment(this.dqmon).subtract(1,'months').format('YYYY-MM')
                this.pinjie(this.dqmon)
            }
        },
        gbsj(s){
            this.dqz = s
        }
    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.dsadasad td:hover{background: antiquewhite}
</style>
